@import "../global/global";

.error-message {
  position: fixed;
  text-align: center;
  width: 100%;
  height: 100%;

  &:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

.error-message__content {
  display: inline-block;
  width: $ring-unit*73;

  text-align: left;
  font-size: 15px;
}

.error-page__line {
  margin: 0 $ring-unit * 4;
  width: auto;
}

.error-message__title {
  color: $ring-text-color;
  font-size: 21px;
}

.error-message__title,
.error-message__section {
  margin-bottom: $ring-unit*2;
}

.error-message__icon {
  float: left;

  // Custom size for ring icon
  &.ring-icon {
    svg {
      width: 100px;
      height: 100px;
    }
  }

  margin: 0 $ring-unit*2 $ring-unit*100;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.2);
}
